<template>
  <div class="content">
    <form action="" class="loginBox">
      <h1>管理系统</h1>
      <el-form>
        <el-form-item label="用户名" prop="username">
          <el-input v-model.number="datas.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="datas.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btnbox">
        <button class="btn1" @click="login">确定</button>
        <button class="btn2" @click="reset">重置</button>
      </div>
    </form>
  </div>
</template>

<script>
import timeTransfrom from "../JS/timetransfrom";
export default {
  data() {
    return {
      datas: {
        name: "",
        password: "",
        userData: {},
      },
    };
  },
  created() {
    localStorage.setItem(
      "islogin",
      JSON.stringify(this.$store.state.information)
    );
    this.userData = JSON.parse(localStorage.getItem("islogin"));
    console.log(this.userData);
  },
  methods: {
    //登录
    login() {
      if (
        this.userData.name == this.datas.name &&
        this.userData.password == this.datas.password
      ) {
        console.log(1111);
        localStorage.setItem("islogin", 1);
        //当前时间
        const time = new Date();
        this.$store.commit("change_lastLoginTime", timeTransfrom(time));
        this.$router.push({ name: "element" });
      } else {
        return false;
      }
    },
    reset() {},
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100vw;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  background-color: #46586b;
  // background-color: #e9eef2;

  .loginBox {
    width: 28vw;
    height: 400px;
    margin: 100px auto;
    padding: 10px;
    background-color: white;
    box-shadow: 1px 1px 2px 1px rgba(76, 76, 76, 0.266);
    text-align: center;
  }
  .btnbox {
    width: 28vw;
    height: 40px;
    position: relative;
  }
  .btnbox div {
    width: 40px;
    height: 20px;
    position: absolute;
  }
  .btn1 {
    top: 40px;
    left: 45px;
  }
  .btn2 {
    top: 40px;
    left: 300px;
  }
}
</style>